<section>
    <h1 class="blue" data-id="#basics/navbar"><i class="ace-icon fa fa-desktop grey"></i> Navbar</h1>

    <div class="hr hr-double hr32"></div>
    <!-- #section:basics/navbar -->
    <h2 class="blue lighter help-title" data-id="#basics/navbar.layout">
        Navbar Basics
    </h2>


    <!-- #section:basics/navbar.layout -->
    <div class="help-content">
        <h3 class="info-title smaller">1. Layout</h3>

        <div class="info-section">
            <ul class="info-list list-unstyled">
                <li>
                    Default HTML layout used for navbar is:
                    <div>
				 <span class="thumbnail inline">
					<img src="images/navbar.png"/>
				 </span>
                    </div>
                    <ol>
                        <li>
                            <b>toggle buttons</b>: come before brand text container(<code>.navbar-header</code>) or
                            inside it.
                        </li>
                        <li>
                            <b>.navbar-header</b>: brand text container.
                        </li>
                        <li>
                            <b>.navbar-menu</b>: optional element which contains a menu or form.
                        </li>
                        <li>
                            <b>.navbar-buttons.navbar-header</b>: contains user info buttons and dropdowns.
                        </li>
                    </ol>

                    <div class="space-4"></div>
<pre data-language="html">
&lt;div id="navbar" class="navbar navbar-default"&gt;
 &lt;div id="navbar-container" class="navbar-container"&gt;

    &lt;!-- toggle buttons are here or inside brand container --&gt;

    &lt;div class="navbar-header pull-left"&gt;
      &lt;!-- brand text here --&gt;
    &lt;/div&gt;&lt;!-- /.navbar-header --&gt;


    &lt;div class="navbar-buttons navbar-header pull-right "&gt;
      &lt;ul class="nav ace-nav"&gt;
        &lt;!-- user buttons such as messages, notifications and user menu --&gt;
      &lt;/ul&gt;
    &lt;/div&gt;&lt;!-- /.navbar-buttons --&gt;


    &lt;nav class="navbar-menu pull-left"&gt;
      &lt;!-- optional menu & form inside navbar --&gt;
    &lt;/nav&gt;&lt;!-- /.navbar-menu --&gt;

 &lt;/div&gt;&lt;!-- /.navbar-container --&gt;
&lt;/div&gt;&lt;!-- /.navbar --&gt;
</pre>
                </li>

                <li>
                    Starting with the following file you can find more details:
                    <br/>
                    <code data-open-file="html" class="open-file"><span class="brief-show">mustache/app/views/layouts/partials/_shared/</span>navbar.mustache</code>
                </li>
            </ul>
            <!-- /.info-list -->
        </div>
        <!-- /.info-section -->


        <h3 class="info-title smaller" data-id="#basics/navbar.mobile">2. Responsive Navbar</h3>
        <!-- #section:basics/navbar.mobile -->
        <div class="info-section">
            <ul class="info-list list-unstyled">
                <li>
                    There are two styles of responsive (mobile view) navbar:
                    <ol class="spaced">
                        <li>
                            Default style in which buttons move down when screen is small and below <b>480px</b>.
                            <br/>
						<span class="thumbnail inline">
							<img src="images/navbar-mobile1.png"/>
						</span>
                            <br/>
                            You can change this value by modifying <code>@screen-topbar-down</code> variable
                            at <code>assets/css/less/variables.less</code> and re-compile <code>ace.less</code>.
                        </li>
                        <li>
                            Bootstrap collapse style in which user buttons & dropdowns are hidden and
                            when screen is below <b>992px</b>, toggle buttons are used to hide/show them.
                            <br/>
						
						<span class="thumbnail inline">
							<img src="images/navbar-mobile2.png"/>
						</span>

                            <br/>
                            <i class="fa fa-hand-o-right"></i>
                            You can change <b>992px</b> to something else,
                            please see the note at <a href="#files/css.bootstrap" class="help-more">CSS section</a>

                            <div class="space-6"></div>
                            To enable this mobile style:
                            <ul>
                                <li>
                                    Add necessary <a href="#basics/navbar.toggle" class="help-more">toggle buttons</a>
                                </li>
                                <li>
                                    Add <code>.navbar-collapse</code> class to <code>.navbar</code> element
                                </li>
                                <li>
                                    Add <code>.navbar-collapse</code> and <code>.collapse</code>
                                    class to <code>.navbar-buttons</code> element
                                </li>

                                <li>
                                    If there are is a navbar menu or form, you should add <code>.navbar-collapse</code>
                                    and <code>.collapse</code>
                                    class to <code>.navbar-menu</code> element
                                </li>
                            </ul>


<pre data-language="html">
&lt;div id="navbar" class="navbar navbar-default navbar-collapse"&gt;
 &lt;div id="navbar-container" class="navbar-container"&gt;

    &lt;div class="navbar-header pull-left"&gt;
      &lt;!-- brand text here --&gt;
    &lt;/div&gt;&lt;!-- /.navbar-header --&gt;


    &lt;div class="navbar-buttons navbar-header pull-right
	                navbar-collapse collapse"&gt;
      &lt;ul class="nav ace-nav"&gt;
        &lt;!-- user buttons such as messages, notifications and user menu --&gt;
      &lt;/ul&gt;
    &lt;/div&gt;&lt;!-- /.navbar-buttons --&gt;


    &lt;nav class="navbar-menu pull-left
	               navbar-collapse collapse"&gt;
      &lt;!-- optional menu & form inside navbar --&gt;
    &lt;/nav&gt;&lt;!-- /.navbar-menu --&gt;

 &lt;/div&gt;&lt;!-- /.navbar-container --&gt;
&lt;/div&gt;&lt;!-- /.navbar --&gt;
</pre>

                        </li>
                    </ol>
                </li>
            </ul>
            <!-- /.info-list -->
        </div>
        <!-- /.info-section -->
        <!-- /section:basics/navbar.mobile -->


        <h3 class="info-title smaller">3. Navbar options</h3>

        <div class="info-section">
            <ul class="info-list list-unstyled">
                <li>
                    <ol class="spaced">
                        <li>
                            For fixed navbar you should add <code>.navbar-fixed-top</code> class to <code>.navbar</code>
                            element.
                            <br/>
                            See <a href="#settings.page" class="help-more">Page Settings</a> for more info.
                        </li>
                        <li>
                            For navbar inside <b>.container</b> you should add <code>.container</code> class to <code>.navbar-container</code>
                            element.
                            <br/>
                            See <a href="#settings.page" class="help-more">Page Settings</a> for more info.
                        </li>
                        <li>
                            When sidebar is horizontal you should add <code>.h-navbar</code> class to
                            <code>.navbar</code> element.
                            <br/>
                            See <a href="#basics/sidebar.horizontal" class="help-more">Horizontal Menu</a> for more
                            info.
                        </li>
                    </ol>
                </li>
            </ul>
            <!-- /.info-list -->
        </div>
        <!-- /.info-section -->


        <h3 class="info-title smaller" data-id="#basics/navbar.layout.brand">4. Brand</h3>
        <!-- #section:basics/navbar.layout.brand -->
        <div class="info-section">
            <ul class="info-list list-unstyled">
                <li>
                    Brand text is inside <code>.navbar-header</code> container and has the following markup:
<pre data-language="html">
 <div class="navbar-header pull-left">
     <a href="#" class="navbar-brand">
         <small>
             <i class="ace-icon fa fa-leaf"></i>
             Brand Text
         </small>
     </a>
 </div>
</pre>
                </li>
            </ul>
            <!-- /.info-list -->
        </div>
        <!-- /.info-section -->
        <!-- /section:basics/navbar.layout.brand -->

    </div>
    <!-- /.help-content -->
    <!-- /section:basics/navbar.layout -->


    <div class="hr hr-double hr32"></div>
    <h2 class="help-title blue lighter" data-id="#basics/navbar.dropdown">
        User Buttons/Dropdowns
    </h2>

    <div class="space-4"></div>

    <!-- #section:basics/navbar.dropdown -->
    <div class="help-content">
        <h3 class="info-title smaller">1. Overview</h3>

        <div class="info-section">
            <ul class="info-list list-unstyled">
                <li>
                    User buttons & dropdowns are inside <code>.navbar-buttons</code> element, inside a
                    <code>ul.ace-nav</code> list:
                    <div class="space-4"></div>
<pre data-language="html">
 &lt;div class="navbar-buttons navbar-header pull-right"&gt;
  &lt;ul class="nav ace-nav"&gt;

    &lt;li class="light-blue"&gt;

     &lt;a data-toggle="dropdown" class="dropdown-toggle" href="#"&gt;
       &lt;i class="ace-icon fa fa-tasks"&gt;&lt;/i&gt;
       &lt;span class="badge"&gt;5&lt;/span&gt;
     &lt;/a&gt;

     &lt;ul class="dropdown-menu dropdown-navbar dropdown-menu-right dropdown-caret dropdown-close"&gt;
       &lt;li class="dropdown-header"&gt;
         title text
       &lt;/li&gt;

       &lt;li&gt;
         item#1.
       &lt;/li&gt;
       &lt;li&gt;
         item#2.
       &lt;/li&gt;

      &lt;li class="dropdown-footer"&gt;
        bottom text or link
      &lt;/li&gt;
    &lt;/ul&gt;

   &lt;/li&gt;
   

   &lt;li&gt;
	Another button and dropdown
   &lt;/li&gt;
   
  &lt;/ul&gt;
 &lt;/div&gt;
</pre>


                    For an example see :
                    <br/>
                    <code data-open-file="html" class="open-file"><span class="brief-name">mustache/app/views/layouts/partials/_shared/navbar/</span>tasks.mustache</code>

                    <br/>
                    <code data-open-file="html" class="open-file"><span class="brief-name">mustache/app/views/layouts/partials/_shared/navbar/</span>notifications.mustache</code>

                </li>
            </ul>
            <!-- /.info-list -->
        </div>
        <!-- /.info-section -->


        <h3 class="info-title smaller">2. Button & Menu colors</h3>

        <div class="info-section">
            <ul class="info-list list-unstyled">
                <li class="spaced2">
                    There are some colors and options for user dropdown buttons:
                    <br/>
                    <ol>
                        <li>Default dark blue color</li>
                        <li><code>grey</code></li>
                        <li><code>purple</code></li>
                        <li><code>green</code></li>
                        <li><code>light-blue</code></li>
                        <li><code>light-blue2</code></li>
                        <li><code>red</code></li>
                        <li><code>light-green</code></li>
                        <li><code>light-purple</code></li>
                        <li><code>light-orange</code></li>
                        <li><code>light-pink</code></li>
                        <li><code>dark</code></li>
                        <li><code>white-opaque</code></li>
                        <li><code>dark-opaque</code></li>
                        <li><code>transparent</code></li>
                        <li><code>light-10</code></li>
                        <li><code>dark-10</code></li>

                        <li class="space-6"></li>

                        <li><code>margin-1</code></li>
                        <li><code>margin-2</code></li>
                        <li><code>margin-3</code></li>
                        <li><code>margin-4</code></li>

                        <li class="space-6"></li>

                        <li><code>no-border</code></li>
                    </ol>
				
<pre data-language="html">
 <li class="light-pink no-border margin-1">
     <!-- dropdown content goes here -->
 </li>
</pre>

                    <div class="alert alert-info">
                        <i class="fa fa-hand-o-right bigger-125"></i>
                        When you change a skin using settings box options,
                        some of the navbar user buttons inside <code>.ace-nav &gt; li</code> may get a different color.
                        <div class="space-4"></div>
                        The color is dynamically changed by switching to one of the above mentioned
                        color classes using Javascript and is not dependent on that specific skin.
                        <br/>
                        You may want to hard code any button color of choice in your HTML without using Javascript.
                    </div>

                </li>

                <li>
                    And there are some different colors for dropdowns:
                    <br/>
                    <ol>
                        <li>Default blue color</li>
                        <li><code>navbar-pink</code></li>
                        <li><code>navbar-grey</code></li>
                        <li><code>navbar-green</code></li>
                    </ol>
<pre data-language="html">
 <li class="purple">
     <a href="#">
         ...
     </a>
     <ul class="dropdown-navbar navbar-pink dropdown-menu dropdown-menu-right dropdown-caret dropdown-close">
         ...
     </ul>
 </li>
</pre>
                </li>
            </ul>
            <!-- /.info-list -->
        </div>
        <!-- /.info-section -->


        <h3 class="info-title smaller">3. Mobile (responsive) User Menus</h3>

        <div class="info-section">
            <ul class="info-list list-unstyled">
                <li>
                    Please refer to <a href="#basics/navbar.mobile" class="help-more">responsive navbar</a> for more
                    info.
                </li>
            </ul>
            <!-- /.info-list -->
        </div>
        <!-- /.info-section -->


        <h3 class="info-title smaller" data-id="#basics/navbar.dropdown-content">4. .dropdown-content & Scrollbars</h3>
        <!-- #section:basics/navbar.dropdown-content -->
        <div class="info-section">
            <ul class="info-list list-unstyled">
                <li>
                    You can put the dropdown's main content inside <code>.dropdown-content</code> element.
                    <br/>
                    This way you can have scrollbars on content:
                    <div>
				 <span class="thumbnail inline">
					<img src="images/scroll-content.png"/>
				 </span>
                    </div>
				
				<pre data-language="html">
 <li class="purple">
     <ul class="dropdown-navbar dropdown-menu dropdown-menu-right">
         <li class="dropdown-header"></li>

         <li class="dropdown-content">
             <ul class="dropdown-menu dropdown-navbar">
                 <!-- content and list of items are here -->
             </ul>
         </li>

         <li class="dropdown-footer"></li>
     </ul>
</pre>
                </li>

                <li>
                    Inside <code>assets/js/ace/ace.js</code> is the code to automatically apply scrollbars on <code>.dropdown-content</code>
                    element.
                    <br/>
                    Default content height is <b>200px</b>. You can change this using <code>data-size</code> attribute:
<pre data-language="html">
  <li class="dropdown-content" data-size="250">

  </li>
</pre>
                </li>
            </ul>
            <!-- /.info-list -->
        </div>
        <!-- /.info-section -->
        <!-- /section:basics/navbar.dropdown-content -->


        <h3 class="info-title smaller" data-id="#basics/navbar.tabbed">5. Tabbed dropdown</h3>
        <!-- #section:basics/navbar.tabbed -->
        <div class="info-section">
            <ul class="info-list list-unstyled">
                <li>
                    You can use a <a href="#elements.tab" class="help-more">tab element</a> inside dropdown.
                    <br/>
                    As an example you can see <b>top menu</b> page:
                    <div>
				  <span class="thumbnail inline no-margin-bottom">
					<img src="images/tabbed-dropdown.png"/>
				  </span>
                    </div>
                    <br/>
                    Inside each <code>.tab-pane</code> you should use a <code>.dropdown-menu</code>:

<pre data-language="html">
<ul class="nav ace-nav">
    <li class="light-blue">
        <a data-toggle="dropdown" class="dropdown-toggle" href="#">
            <i class="ace-icon fa fa-bell icon-animated-bell"></i>
        </a>

        <!-- it should be a "DIV.dropdown-menu" here not a "UL.dropdown-menu" -->
        <div class="dropdown-navbar dropdown-menu dropdown-menu-right dropdown-caret dropdown-close">
            <div class="tabbable">

                <!-- tab buttons here -->
                <ul class="nav nav-tabs">
                    <li class="active">
                        <a data-toggle="tab" href="#navbar-tasks">
                            Tasks
                            <span class="badge badge-danger">4</span>
                        </a>
                    </li>
                    <li>
                        <a data-toggle="tab" href="#navbar-messages">
                            Messages
                            <span class="badge badge-danger">5</span>
                        </a>
                    </li>
                </ul>
                <!-- .nav-tabs -->


                <!-- tab content here -->
                <div class="tab-content">

                    <div id="navbar-tasks" class="tab-pane in active">
                        <!-- first tab pane and the .dropdown-menu inside it -->
                        <ul class="dropdown-navbar dropdown-menu dropdown-menu-right">
                            <li>
                                item # 1
                            </li>
                            <li>
                                item # 2
                            </li>

                            <li class="dropdown-footer">
                                ...
                            </li>
                        </ul>
                    </div>
                    <!-- /.tab-pane -->


                    <div id="navbar-messages" class="tab-pane">
                        <!-- second tab pane and the .dropdown-menu inside it -->
                        <ul class="dropdown-navbar dropdown-menu dropdown-menu-right">
                            <!-- .dropdown-content -->
                            <li class="dropdown-content">
                                <ul class="dropdown-menu dropdown-navbar">
                                    <li>
                                        item # 1
                                    </li>
                                    <li>
                                        item # 2
                                    </li>
                                </ul>
                            </li>
                            <!-- /.dropdown-content -->

                            <li class="dropdown-footer">
                                ...
                            </li>
                        </ul>
                    </div>
                    <!-- /.tab-pane -->

                </div>
                <!-- /.tab-content -->

            </div>
            <!-- /.tabbable -->

        </div>
        <!-- /DIV.dropdown-menu -->
    </li>
</ul><!-- /.ace-nav -->
</pre>
                </li>
            </ul>
            <!-- /.info-list -->
        </div>
        <!-- /.info-section -->
        <!-- /section:basics/navbar.tabbed -->


    </div>
    <!-- /.help-content -->
    <!-- /section:basics/navbar.dropdown -->


    <div class="hr hr-double hr32"></div>
    <h2 class="help-title blue lighter" data-id="#basics/navbar.user">
        User Menu
    </h2>

    <div class="space-4"></div>

    <div class="help-content">
        <h3 class="info-title smaller" data-id="#basics/navbar.user_menu">User menu</h3>
        <!-- #section:basics/navbar.user_menu -->
        <div class="info-section">
            <ul class="info-list list-unstyled">
                <li>
                    <div>
					<span class="thumbnail inline">
						<img src="images/user-menu.png"/>
					</span>
                    </div>
                    User menu has the following markup and is inside <code>ul.ace-nav</code>
                    <br/>
                    <code data-open-file="html" class="open-file"><span class="brief-show">mustache/app/views/layouts/partials/default/navbar/</span>user_menu.mustache</code>
                    <br/>
<pre data-language="html">
<ul class="ace ace-nav">
    ...
    <li class="light-blue">
        <a data-toggle="dropdown" href="#" class="dropdown-toggle">
            <img class="nav-user-photo" src="path/to/avatar.jpg" alt="Jason's Photo"/>
    <span class="user-info">
      <small>Welcome,</small> Jason
    </span>
            <i class="ace-icon fa fa-caret-down"></i>
        </a>
        <ul class="user-menu dropdown-menu dropdown-menu-right dropdown-yellow dropdown-caret dropdown-close">
            <li><a href="#"><i class="ace-icon fa fa-cog"></i> Settings</a></li>
            <li class="divider"></li>
            <li><a href="#"><i class="ace-icon fa fa-power-off"></i> Logout</a></li>
        </ul>
    </li>

</ul>
</pre>

                    You can also add <code>.user-min</code> class to it, so it becomes more compact:
<pre data-language="html">
  <li class="light-blue user-min">
      ...
  </li>
</pre>
                </li>
            </ul>
            <!-- /.info-list -->
        </div>
        <!-- /.info-section -->
    </div>
    <!-- /section:basics/navbar.user_menu -->


    <div class="hr hr-double hr32"></div>
    <h2 class="help-title blue lighter" data-id="#basics/navbar.toggle">
        Toggle buttons
    </h2>

    <div class="space-4"></div>

    <!-- #section:basics/navbar.toggle -->
    <div class="help-content">
        <h3 class="info-title smaller">1. Navbar toggle button</h3>

        <div class="info-section">
            <ul class="info-list list-unstyled">
                <li>
                    Toggle buttons are used when navbar or sidebar have collapsible mobile style.
                    <br/>
                    You should put the code either inside <b>.navbar-header</b> which contains brand text or before it:
<pre data-language="html">
 <!-- collapse style toggle buttons can be here -->
 <div class="navbar-header pull-left">
     <a class="navbar-brand" href="#">
         <!-- brand text is here -->
     </a>
     <!-- collapse style toggle buttons can be here -->
 </div>
</pre>
                </li>

                <li>
                    The following is a button which toggles <code>.navbar-buttons,.navbar-menu</code>.
                    <br/>
                    Using <code>data-toggle</code> and <code>data-target</code> attributes,
                    you can choose to toggle any element, for example toggle only <code>.navbar-buttons</code> or
                    both <code>.navbar-buttons,.navbar-menu</code>
<pre data-language="html">
 &lt;button
  class="pull-right navbar-toggle navbar-toggle-img collapsed" type="button"
  data-toggle="collapse" data-target=".navbar-buttons,.navbar-menu"&gt;
   &lt;span class="sr-only"&gt;Toggle user menu&lt;/span&gt;
   &lt;img src="path/to/avatar/user.jpg" alt="Jason's Photo" /&gt;
 &lt;/button&gt;
</pre>
                </li>

                <li>
                    Inside the button you can also use an icon instead of an avatar :
                    <br/>
<pre data-language="html">
 &lt;button class="pull-right navbar-toggle collapsed" type="button"
  data-toggle="collapse" data-target=".navbar-buttons"&gt;
   &lt;span class="sr-only"&gt;Toggle user menu&lt;/span&gt;
   &lt;i class="ace-icon fa fa-user fa-2x white"&gt;&lt;/i&gt;
 &lt;/button&gt;
</pre>
                </li>

                <li>
                    See the following for more info:
                    <br/>
                    <code data-open-file="html" class="open-file"><span class="brief-show">mustache/app/views/layouts/partials/_shared/navbar/</span>toggle_buttons.mustache</code>
                </li>
            </ul>
            <!-- /.info-list -->
        </div>
        <!-- /.info-section -->


        <h3 class="info-title smaller" data-id="#basics/navbar.toggle.sidebar">2. Sidebar toggle button</h3>

        <div class="info-section">
            <ul class="info-list list-unstyled">
                <li>
                    Please see <a href="#basics/sidebar.mobile.toggle" class="help-more">Sidebar toggle</a> for more
                    info
                </li>
            </ul>
            <!-- /.info-list -->
        </div>
        <!-- /.info-section -->
    </div>
    <!-- /.help-content -->
    <!-- /section:basics/navbar.toggle -->


    <div class="hr hr-double hr32"></div>
    <h2 class="help-title blue lighter" data-id="#basics/navbar.toggle">
        Navbar Menu & Form
    </h2>

    <div class="space-4"></div>

    <div class="help-content">
        <h3 class="info-title smaller" data-id="#basics/navbar.nav">1. Navbar Menu</h3>
        <!-- #section:basics/navbar.nav -->
        <div class="info-section">
            <ul class="info-list list-unstyled">
                <li>
                    You can have a menu inside navbar like <b>top menu</b> sample page.
                </li>

                <li>
                    For an overview of the HTML markup needed for that you can see:
                    <br/>
                    <code data-open-file="html" class="open-file"><span class="brief-show">mustache/app/views/layouts/partials/_shared/navbar/</span>topmenu.mustache</code>
                </li>

                <li>
                    Inside <code>.navbar-menu</code> container, you should have <code>ul.nav.navbar-nav</code> element:
                </li>

                <li>
<pre data-language="html">
 <nav role="navigation" class="navbar-menu pull-left collapse navbar-collapse">
     <ul class="nav navbar-nav">

         <li>
             <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                 item # 1
             </a>
             <ul class="dropdown-menu dropdown-light-blue dropdown-caret">
                 <!-- optional submenu items -->
             </ul>
         </li>

         <li>
             <a href="#">
                 item # 2
             </a>
         </li>

     </ul>

     <!-- you can also have a form here -->
 </nav>
</pre>
                </li>

            </ul>
            <!-- /.info-list -->
        </div>
        <!-- /.info-section -->
        <!-- /section:basics/navbar.nav -->


        <h3 class="info-title smaller" data-id="#basics/navbar.form">2. Navbar Form</h3>
        <!-- #section:basics/navbar.form -->
        <div class="info-section">
            <ul class="info-list list-unstyled">
                <li>
                    Navbar form is similar to navbar menu.
                    <br/>
                    Inside <code>.navbar-menu</code> container, the form should have <code>.navbar-form</code> class:
                    <br/>
<pre data-language="html">
 <nav role="navigation" class="navbar-menu pull-left collapse navbar-collapse">
     <!-- you can also have a menu here -->
     <form class="navbar-form navbar-left form-search" role="search">
         <div class="form-group">
             <input type="text" placeholder="search"/>
         </div>
         <button type="button" class="btn btn-xs btn-info2">
             <i class="ace-icon fa fa-search icon-only bigger-110"></i>
         </button>
     </form>
 </nav>
</pre>
                </li>
            </ul>
            <!-- /.info-list -->
        </div>
        <!-- /.info-section -->
        <!-- /section:basics/navbar.form -->

    </div>
    <!-- /.help-content -->

    <!-- /section:basics/navbar -->

</section>